<!--
 描述: 环形跑道图
 作者: Jack Chen
 日期: 2020-04-29
-->

<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">村级集体经济年收入构成</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="chart_run_cun"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "circleRunwaycun",
        data() {
            return {
                option: null,
            }
        },
        mounted() {
            this.getEchart();
        },
        methods: {
            getEchart() {
                // 初始化echarts实例
                let myChart = echarts.init(document.getElementById("chart_run_cun"));
                this.baseUrl = localStorage.getItem("baseUrl");
                var url = this.baseUrl + "memberDatav/findCunByYearType";

                // 将党组织的党支部坐标与值对应并反映在地图上
                axios.post(url).then((response) => {
                    var datalist = [];
                    var res = response.data;
                    for (var i = 0; i < res.length; i++) {
                        datalist.push({
                            value: res[i].value,
                            name: res[i].name
                        });
                    }
                    console.log(datalist)

                    this.option = {
                        color: ["#3E00F4", "#9B9AF4", "#7C5836", "#62946A", "#6ED2F4"],
                        tooltip: {
                            trigger: "item",
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: "vertical",
                            left: 10,
                            data: ["发包及上交", "经营收入", "投资收益", "其他收入"]
                        },
                        series: [
                            {
                                name: "收入类型",
                                type: "pie",
                                radius: ["50%", "70%"],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: "center"
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: "30",
                                        fontWeight: "bold"
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data:
                                datalist
                            }
                        ]
                    };

                // this.option = {
                //     color: ["#3E00F4", "#9B9AF4", "#7C5836","#62946A","#6ED2F4"],
                //     tooltip: {
                //         trigger: "item"
                //     },
                //     series: [{
                //         type: "pie",
                //         roseType: "radius",
                //         radius: ["30%", "70%"],
                //         data: [
                //             {
                //                 value: 210,
                //                 name: "经营性"
                //             },
                //             {
                //                 value: 120,
                //                 name: "发包及上交"
                //             },
                //             {
                //                 value: 189,
                //                 name: "投资收益"
                //             },
                //             {
                //                 value: 129,
                //                 name: "其他收入"
                //             }
                //         ],
                //         label: {
                //             normal: {
                //                 formatter: "{font|{c}人}\n{hr|}\n{font|{b}}",
                //                 rich: {
                //                     font: {
                //                         fontSize: 13,
                //                         padding: [5, 0],
                //                         color: "#14b0ff"
                //                     },
                //                     hr: {
                //                         height: 0,
                //                         borderWidth: 1,
                //                         width: "100%",
                //                         borderColor: "#14b0ff"
                //                     }
                //                 }
                //             },
                //         },
                //         labelLine: {
                //             lineStyle: {
                //                 color: "#14b0ff"
                //             }
                //         },
                //         emphasis: {
                //             itemStyle: {
                //                 shadowBlur: 10,
                //                 shadowOffsetX: 0,
                //                 shadowColor: "rgba(0,0,0,0.5)"
                //             }
                //         }
                //     }]
                // };
                // 使用制定的配置项和数据显示图表
                myChart.setOption(this.option, true);
                window.addEventListener("resize", () => {
                    myChart.resize();
                });

                }).catch(function (response) {
                    console.log(response); //发生错误时执行的代码
                });
            },
        },
        beforeDestroy() {
        }
    };
</script>
<style lang="scss" scoped>
    .sn-container {
        left: 10px;
        top: 40px;
        width: 508px;
        height: 30%;

        .chartsdom {
            width: 100%;
            height: 100%;
        }

        .pdt-info {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -1px;
            transform: translate(0%, -50%);
            white-space: nowrap;

            &.info0 {
                margin-top: -160.5px;

                span {
                    &:nth-child(1) {
                        background-color: rgb(0, 114, 188);
                    }
                }
            }

            &.info1 {
                margin-top: -128.5px;

                span {
                    &:nth-child(1) {
                        background-color: rgb(0, 255, 255);
                    }
                }
            }

            &.info2 {
                margin-top: -96.5px;

                span {
                    &:nth-child(1) {
                        background-color: rgb(255, 146, 50);
                    }
                }
            }

            > span {
                font-size: 16px;
                color: #0072bc;
                vertical-align: middle;

                &:nth-child(1) {
                    margin-right: 6px;
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 0.5em rgba(255, 255, 0, 0.1);
                    text-decoration: underline;
                    cursor: pointer;

                    &:hover {
                        color: #00aeef;
                    }
                }

                &:nth-child(2) {
                    font-family: Arial;
                    color: #00aeef;
                }
            }
        }
    }
</style>
